<template>
	<view class="">
		
	
	<view class="bazi_info_yunshi" v-if="data.base_info.name!=''">

		<view class="base_info">

			<view class="show">
				<text class="l">缘主姓名:</text>
				<text class="r">{{data.base_info.name}}</text>
			</view>
			<view class="show">
				<text class="l">出生公历:</text>
				<text class="r">{{data.base_info.gongli}}</text>
			</view>

			<view class="show">
				<text class="l">出生农历:</text>
				<text class="r">{{data.base_info.nongli}}</text>
			</view>



		</view>



		<view class="base_info">
			<view class="details">
				<view class="names">
					<text>真爱画像：</text>

				</view>
				<view class="des">
					<view>
						<view class="">
							<img :src="data.zhengyuan_info.huaxiang.profile_image" alt="" />
						</view>
						<view class="">
							<text>眉毛：</text>
							<text>{{data.zhengyuan_info.huaxiang.eyebrow_shape}}</text>
						</view>
						<view class="">
							<text>眼睛：</text>
							<text>{{data.zhengyuan_info.huaxiang.eye_shape}}</text>
						</view>
						<view class="">
							<text>脸型：</text>
							<text>{{data.zhengyuan_info.huaxiang.face_shape}}</text>
						</view>
						<view class="">
							<text>嘴巴：</text>
							<text>{{data.zhengyuan_info.huaxiang.mouth_shape}}</text>
						</view>
						<view class="">
							<text>鼻子：</text>
							<text>{{data.zhengyuan_info.huaxiang.nose_shape}}</text>
						</view>
						<view class="">
							<text>身材：</text>
							<text>{{data.zhengyuan_info.huaxiang.body_shape}}</text>
						</view>
					</view>
				</view>

			</view>

			<view class="details">
				<view class="names">
					<text>真爱特质</text>

				</view>
				<view class="des">
					<div class="des_deta"><text
							style="color: blue;">[恋爱性格]</text>：{{data.zhengyuan_info.tezhi.marital_happiness}}</div>
					<div class="des_deta"><text
							style="color: blue;">[事业财富]：</text>{{data.zhengyuan_info.tezhi.career_wealth}}</div>
					<div class="des_deta"><text
							style="color: blue;">[家庭背景]：</text>{{data.zhengyuan_info.tezhi.family_background}}</div>
					<div class="des_deta"><text
							style="color: blue;">[幸福指数]：</text>{{data.zhengyuan_info.tezhi.romantic_personality}}</div>
				</view>

			</view>

			<view class="details">
				<view class="names">
					<text>真爱指引</text>

				</view>
				<view class="des">
					<div class="des_deta"><text
							style="color: blue;">[真爱方位]</text>：{{data.zhengyuan_info.zhiyin.love_location}}</div>
					<div class="des_deta"><text
							style="color: blue;">[结识方式]：</text>{{data.zhengyuan_info.zhiyin.meeting_method}}</div>
					<div class="des_deta"><text
							style="color: blue;">[相处模式]：</text>{{data.zhengyuan_info.zhiyin.interaction_model}}</div>
					<div class="des_deta"><text
							style="color: blue;">[真爱告诫]：</text>{{data.zhengyuan_info.zhiyin.love_advice}}</div>
				</view>

			</view>
			<view class="details">
				<view class="names">
					<text>真爱运势</text>

				</view>
				<view class="des">
					<div class="des_deta"><text style="color: blue;">[感情运势]</text>：{{data.zhengyuan_info.yunshi}}</div>

				</view>

			</view>


		</view>
		<view class="yl">
			<text>仅供娱乐！请勿当真</text>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				data: {
					base_info: {
						name: "",
					}
				}
			}
		},
		onLoad(options) {
			console.log(options)
			this.data = JSON.parse(options.data)
			// console.log(this.data)
			// console.log(options.data)

		}
	}
</script>

<style lang="scss">
	@mixin flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px;

		height: 45px;
	}

	@mixin tr1_w {
		width: 33px;
		text-align: center;

	}

	text {
		user-select: all;
	}

	.bazi_info_yunshi {

		.base_info {
			margin: 20px;

			.title {
				display: flex;
				padding: 10rpx;

				.shu {

					width: 5px;
					height: 20px;
					background-color: #e6a84b;
					border-radius: $uni-border-radius-base;
				}

				.ti {
					padding-left: 15rpx;
					font-weight: 800;
					font-size: 30rpx;
				}
			}

			.show {
				margin-top: 15px;

				.l_ {
					font-size: 28rpx;
					display: inline-block;
					min-width: 50px;
					font-weight: 800;
				}

				.l {
					font-size: 30rpx;
					display: inline-block;
					min-width: 80px;
					font-weight: 800;

				}


			}

			.details {
				border: 1px solid #e5e5e5;
				border-bottom: none;
				margin-top: 20px;

				.names {
					text-align: center;
					color: #e6a84b;
					border-bottom: 1px solid #e5e5e5;
					color: #e6a84b;
					font-size: 28rpx;
					background-color: #fff3ef;
					padding: 15px;
				}

				.des {
					border-bottom: 1px solid #e5e5e5;
					padding-left: 20rpx;

					align-items: center;

					.des_text {
						color: #e6a84b;
						width: 14%;
						font-weight: 800;
						user-select: text;
					}

					.des_deta {
						width: 100%;
						line-height: 26px;
						text-indent: 2em;
						user-select: text;
					}
				}
			}
		}

	}
</style>